<template>
<div class="repairList">
  <!-- 头部tab -->
  <div class="header-wrap">
    <span class="header-wrap-left"  @click="goback">
      <i class="iconback iconfont icon-fanhui"></i>
    </span>
    <span class="header-wrap-text">历史报修</span>
    <span class="header-wrap-right">
    </span>
  </div>
  <div class="repairList-box" >
    <div class="repairList-content" @click="torepairDetail(list.id)"  v-for="(list,index) in listData" :key="index">
      <div class="repairList-content-show">
        <div class='noticeSwiper-img-box'>
          <img class="noticeSwiper-img" v-lazy="host+list.repair_imgs[0]" v-if="list.repair_imgs[0]" :src="host+list.repair_imgs[0]" alt="">
          <img class="noticeSwiper-img" v-else src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594267483786&di=232665e4c3b5447fb1f7236d13ffc849&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2F2FB2OH2lUQCgD7WPaYQnmb47qO6hVB672wEthgvSZFTWq1545293646375compressflag.jpg" alt="">
        </div>
        <div class="noticeSwiper-content">
          <div class="noticeSwiper-list">
            <span class="noticeSwiper-tittle">{{list.residential_text}}</span>
            <div class="noticeSwiper-price">
              <span>{{list.repair_title}}</span>
              <span>{{list.createtime_text}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Tips v-if="show"/>
  </div>
</div>
</template>
<script>
import api from '../../api/api.js'
import Tips from '../../components/tips'
export default {
  data(){
    return{
      host: api.host,
      listData:[],
      show:false,
      lengtn: null,
    }
  },
  created(){
    this.getList()
  },
  methods:{
    goback(){
      this.$router.go(-1)
    },
    torepairDetail(id){
      this.$router.push({
        path: '/repairDetail',
        query: {
          id
        }
      })
    },
    getList(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.increaselist,{})
      .then((response) => {
        if(response.status==200){
          this.listData = response.data.data.list
          this.lengtn = response.data.data.total
          this.$toast.clear();
          if(this.lengtn<=0){
            this.show = true
          }else{
            this.show = false
          }
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
  },
  components:{
    Tips
  }
}
</script>
<style scoped>
.repairList-box{
  padding-top: 1.5rem;
}
.repairList{
  margin:0 .35rem;
}
.repairList-content{
  margin-bottom: .35rem;
  height: auto;
}
.noticeSwiper{
  padding-bottom: 3rem;
  width: 100%;
  height: auto;
}
.noticeSwiper-img-box{
  width: 100%;
  height: 5rem;
  overflow: hidden;
  border-radius: .2rem .2rem 0 0;
}
.noticeSwiper-img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: .2rem .2rem 0 0;
}
.swiper-slide{
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  font-weight: bold;
  border-radius: 0 0 .2rem .2rem;
  height: 22%;
  background: #fff;
}
.noticeSwiper-list{
  margin-left: .28rem;
}
.noticeSwiper-tittle{
  font-size: .32rem;
  display: block;
  padding-top: .3rem;
  width: 88%;
  height: .35rem;
  line-height: .35rem;
  color: #000;
}
.noticeSwiper-price{
  display: flex;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  margin: .2rem 0;
  color: #ee5a8a;
}
.noticeSwiper-price span{
  flex: 1;
}
.noticeSwiper-price span:nth-of-type(1){
  color: #57c5c6;
}
.noticeSwiper-rate{
  display: flex;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .3rem;
  height: .3rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .25rem;
}
</style>